<div ng-include="'main/_/top.html'"></div>

<script type="text/ng-template" id="auth-endpoint-popup.html">
  <div>
    <ol style="padding-left:10px;">
      <li>{{'auth.eptpl.popup.msg1'|translate}}</li>
      <li>{{'auth.eptpl.popup.msg2'|translate}}<code>http://oss-cn-hangzhou-zmf.aliyuncs.com</code></li>
    </ol>
  </div>
</script>

<script type="text/ng-template" id="auth-preosspath-popup.html">
  <div>
    <ol style="padding-left:10px;">
      <li>{{'auth.presetOssPath.popup.msg1'|translate}}</li>
      <li>{{'auth.presetOssPath.popup.msg2'|translate}}</li>
    </ol>
  </div>
</script>

<script type="text/ng-template" id="auth-remember-popup.html">
  <div>
    {{'auth.remember.popup.msg1'|translate}}
  </div>
</script>

<script type="text/ng-template" id="auth-requestpay-popup.html">
  <div>
    {{'requestpay.popup.msg'|translate}}(<a ng-click="openURL('https://help.aliyun.com/document_detail/91337.html')">requestPayer</a>)
  </div>
</script>

<div style="overflow: auto; height: 100%">
  <div class="clearfix" style="height: 40px"></div>

  <div class="col-sm-8 col-sm-offset-2">
    <div class="panel panel-default shadow10">
      <!-- <div class="panel-heading">
      AK登录
       </div> -->
      <div class="panel-heading pd0" style="border: 0">
        <ul class="nav nav-tabs">
          <li role="presentation" ng-class="{active:gtab==1}">
            <a href="" ng-click="gtab=1">
              {{'auth.akLogin'|translate}}
              <!-- AK登录 -->
            </a>
          </li>
          <li role="presentation" ng-class="{active:gtab==2}">
            <a href="" ng-click="gtab=2">
              {{'auth.tokenLogin'|translate}}
              <!-- 授权码登录 -->
            </a>
          </li>
        </ul>
      </div>
      <div class="panel-body">
        <form
          ng-if="gtab==1"
          class="form-horizontal"
          name="form1"
          ng-submit="onSubmit(form1)"
        >
          <div class="form-group">
            <label for="endpoint" class="col-sm-4 control-label"
              ><span class="red">*</span> Endpoint:
              <span
                uib-popover-template="'auth-endpoint-popup.html'"
                popover-trigger="'mouseenter'"
                popover-append-to-body="true"
              >
                <i class="fa fa-question-circle"></i>
              </span>
            </label>
            <div class="col-sm-8" style="padding: 0">
              <div
                ng-class="{'col-sm-9':eptplType=='default','col-sm-4':eptplType=='customize'||eptplType=='cname'||eptplType=='privateLink'}"
              >
                <select
                  class="form-control"
                  ng-model="eptplType"
                  ng-change="eptplChange(eptplType)"
                >
                  <option value="default">
                    {{'default'|translate}} ({{'public.cloud'|translate}})
                  </option>
                  <option value="customize">{{'customize'|translate}}</option>
                  <option value="cname">cname</option>
                  <option value="privateLink">{{'privateLink'|translate}}</option>
                </select>
              </div>
              <div
                ng-if="eptplType=='default'"
                class="col-sm-3"
                style="height: 34px"
              >
                <label
                  style="
                    vertical-align: -webkit-baseline-middle;
                    margin-bottom: 0;
                  "
                >
                  <input
                    type="checkbox"
                    ng-model="flags.secure"
                    ng-true-value="'YES'"
                    ng-false-value="'NO'"
                  />
                  {{'auth.secure'|translate}}
                </label>
              </div>
              <div
                style="display: flex; justify-content: space-around"
                class="col-sm-8"
                style="padding-left: 0"
                ng-if="eptplType=='customize'"
                ng-class="{'has-error':!form1.endpoint.$valid}"
              >
                <input
                  type="text"
                  required
                  ng-model="item.eptpl"
                  ng-pattern="/^http(s)?\:\/\//"
                  class="form-control"
                  id="endpoint"
                  name="endpoint"
                  placeholder="http(s)://"
                />
              </div>
              <!--// cname -->
              <div
                style="display: flex; justify-content: space-around"
                class="col-sm-8"
                style="padding-left: 0"
                ng-if="eptplType=='cname'"
                ng-class="{'has-error':!form1.cname.$valid}"
              >
                <input
                  type="text"
                  required
                  ng-model="item.eptplcname"
                  ng-pattern="/^http(s)?\:\/\//"
                  class="form-control"
                  id="cname"
                  name="cname"
                  placeholder="http(s)://"
                />
              </div>
              <!--// 私网连接 -->
              <div
                style="display: flex; justify-content: space-around"
                class="col-sm-8"
                style="padding-left: 0"
                ng-if="eptplType=='privateLink'"
                ng-class="{'has-error':!form1.privateLink.$valid}"
              >
                <input
                  type="text"
                  required
                  ng-model="item.privateLink"
                  ng-pattern="/^http(s)?\:\/\//"
                  class="form-control"
                  id="privateLink"
                  name="privateLink"
                  placeholder="http(s)://"
                />
              </div>
            </div>
          </div>
          <div
            class="form-group has-feedback"
            ng-class="{'has-error': !form1.aid.$valid }"
          >
            <label for="aid" class="col-sm-4 control-label"
              ><span class="red">*</span> AccessKeyId:</label
            >
            <div class="col-sm-8">
              <input
                type="text"
                required
                ng-model="item.id"
                class="form-control"
                id="aid"
                name="aid"
                placeholder="{{'auth.id.placeholder'|translate}}"
              />
            </div>
          </div>
          <div
            class="form-group has-feedback"
            ng-class="{'has-error': !form1.akey.$valid }"
          >
            <label for="akey" class="col-sm-4 control-label"
              ><span class="red">*</span> AccessKeySecret:</label
            >
            <div class="col-sm-8">
              <input
                type="password"
                required
                ng-model="item.secret"
                class="form-control"
                id="akey"
                name="akey"
                placeholder="{{'auth.secret.placeholder'|translate}}"
              />
            </div>
          </div>

          <div
            ng-if="item.id.indexOf('STS.')==0"
            class="form-group has-feedback"
            ng-class="{'has-error': !form1.stoken.$valid }"
          >
            <label for="stoken" class="col-sm-4 control-label">
              STS Token:</label
            >
            <div class="col-sm-8">
              <input
                type="text"
                required
                ng-model="item.stoken"
                class="form-control"
                id="stoken"
                name="stoken"
                placeholder="{{'auth.stoken.placeholder'|translate}}"
              />
            </div>
          </div>

          <div
            class="form-group"
            ng-class="{'has-error': !form1.osspath.$valid }"
          >
            <label for="input3" class="col-sm-4 control-label">
              {{'auth.presetOssPath'|translate}}:
              <!-- 预设OSS路径(可选): -->
              <span
                uib-popover-template="'auth-preosspath-popup.html'"
                popover-trigger="'mouseenter'"
                popover-append-to-body="true"
              >
                <i class="fa fa-question-circle"></i>
              </span>
            </label>
            <div class="col-sm-8">
              <input
                type="text"
                name="osspath"
                ng-pattern="reg_osspath"
                ng-model="item.osspath"
                class="form-control"
                id="input3"
                placeholder="{{'auth.presetOssPath.placeholder'|translate}}"
              />
            </div>
            <!-- <div class="col-sm-2">
              <label style="margin-bottom: 0; line-height: 34px">
                <input
                  type="checkbox"
                  ng-model="item.osspath_isdir"
                  ng-true-value="true"
                  ng-false-value="false"
                />
                {{'folder' | translate}}
              </label>
            </div> -->
          </div>

          <div ng-if="item.osspath" class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <div class="checkbox">
                <label>
                  <input
                    type="checkbox"
                    ng-model="flags.requestpaystatus"
                    ng-true-value="'YES'"
                    ng-false-value="'NO'"
                  />
                  {{'requestPay'|translate}}
                  <!-- 请求者付费模式 -->

                  <span
                    uib-popover-template="'auth-requestpay-popup.html'"
                    popover-trigger="'click'"
                    popover-append-to-body="true"
                  >
                    <i class="fa fa-question-circle"></i>
                  </span>
                </label>
              </div>
            </div>
          </div>

          <div
            class="form-group"
            ng-if="item.osspath && item.eptpl.indexOf('{region}')!=-1"
          >
            <label for="input4" class="col-sm-4 control-label">
              <!-- <span class="red">*</span> -->
              {{'region'|translate}}:
              <!-- 区域: -->
            </label>
            <div class="col-sm-8">
              <select
                required
                ng-model="item.region"
                class="form-control"
                id="input4"
                placeholder="{{'auth.region.placeholder'|translate}}"
                ng-options="rg.id as ('region.'+rg.id|translate) for rg in regions"
              ></select>
            </div>
          </div>

          <div class="form-group">
            <label for="input5" class="col-sm-4 control-label">
              {{'auth.description'|translate}}:
              <!-- 备注(最多30个字): -->
            </label>
            <div class="col-sm-8">
              <input
                type="text"
                ng-model="item.desc"
                maxlength="30"
                class="form-control"
                id="input5"
                placeholder="{{'auth.description.placeholder'|translate}}"
              />
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <div class="checkbox">
                <label style="margin-right: 20px">
                  <input
                    type="checkbox"
                    ng-model="flags.keepLoggedIn"
                    ng-true-value="'YES'"
                    ng-false-value="'NO'"
                  />
                  {{'auth.keepLoggedIn'|translate}}
                  <!-- 保持登录 -->
                </label>

                <label>
                  <input
                    type="checkbox"
                    ng-model="flags.remember"
                    ng-true-value="'YES'"
                    ng-false-value="'NO'"
                  />
                  {{'auth.remember'|translate}}
                  <!-- 记住秘钥 -->

                  <span
                    uib-popover-template="'auth-remember-popup.html'"
                    popover-trigger="'mouseenter'"
                    popover-append-to-body="true"
                  >
                    <i class="fa fa-question-circle"></i>
                  </span>
                </label>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
              <button type="submit" class="btn btn-primary">
                {{'auth.login'|translate}}
                <!-- 登入 -->
              </button>

              <button
                type="button"
                class="btn btn-default"
                ng-model="flags.showHis"
                uib-btn-checkbox
                btn-checkbox-true="'YES'"
                btn-checkbox-false="'NO'"
              >
                {{'auth.akHistories'|translate}}
                <!-- AK历史 -->
              </button>
            </div>
          </div>
        </form>

        <form
          ng-if="gtab==2"
          class="form-horizontal"
          name="form2"
          ng-submit="onSubmit2(form2)"
        >
          <div class="form-group">
            <label for="input-x" class="col-sm-3 control-label"
              ><span class="red">*</span>
              {{'auth.authToken'|translate}}:
              <!-- 授权码: -->
              <a
                href=""
                uib-tooltip="{{'auth.authToken.tooltip'|translate}}"
                tooltip-append-to-body="true"
                ng-click="openURL('https://github.com/aliyun/oss-browser/blob/master/docs/authToken.md')"
              >
                <i class="fa fa-question-circle"></i></a
            ></label>
            <div class="col-sm-9">
              <textarea
                required
                ng-model="item.authToken"
                rows="10"
                ng-change="authTokenChange()"
                class="form-control"
                id="input-x"
                placeholder="{{'auth.authToken.placeholder'|translate}}"
              >
              </textarea>

              <small class="text-danger" ng-if="!authTokenInfo">
                {{'auth.authToken.error.invalid'|translate}}
                <!-- 请输入有效的授权码 -->
              </small>
              <small
                class="text-danger"
                ng-if="authTokenInfo && authTokenInfo.isExpired"
              >
                {{'auth.authToken.error.expired'|translate}}
                <!-- 授权码已经过期 -->
              </small>
              <small
                class="text-success"
                ng-if="authTokenInfo && !authTokenInfo.isExpired && authTokenInfo.expiration"
              >
                ({{"auth.authToken.info.validUntil"|translate:{expiration:authTokenInfo.expirationStr}
                }},
                <!-- (有效期至{{authTokenInfo.expiration|timeFormat}},  -->
                {{'auth.authToken.info.leftTime'|translate}}:
                <my-timer
                  class="text-warning"
                  expiration="authTokenInfo.expiration"
                ></my-timer>
                )
              </small>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
              <button
                ng-disabled="!authTokenInfo || authTokenInfo.isExpired"
                type="submit"
                class="btn btn-primary"
              >
                {{'auth.login'|translate}}
                <!-- 登入 -->
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="clearfix"></div>

  <div ng-if="gtab==1" class="col-xs-12" ng-show="flags.showHis=='YES'">
    <header>
      <h4 class="col-xs-6">
        {{'auth.akHistories'|translate}}
        <!-- AK历史 -->
      </h4>
      <div class="col-xs-6">
        <a
          href=""
          ng-click="showCleanHistories()"
          class="pull-right text-danger"
          style="padding-top: 10px"
        >
          {{'auth.clearHistories'|translate}}
          <!-- 清空历史 -->
        </a>
      </div>
    </header>
    <table class="table table-condensed table-striped table-bordered">
      <tr>
        <th>-</th>
        <th>ID</th>
        <th>Secret</th>
        <th>{{'auth.description'|translate}}</th>
        <th>{{'actions'|translate}}</th>
      </tr>
      <tr ng-repeat="h in his">
        <td>{{$index+1}}</td>
        <td>{{h.id}}</td>
        <td>{{h.secret|hideSecret}}</td>
        <td>{{h.desc}}</td>
        <td>
          <a href="" ng-click="useHis(h)">{{'use'|translate}}</a> |
          <a href="" ng-click="showRemoveHis(h)" class="text-danger"
            >{{'delete'|translate}}</a
          >
        </td>
      </tr>
    </table>
  </div>
  <div class="clearfix"></div>
</div>
